<script setup>

import { ElDialog } from 'element-plus'


import { useGridors } from '@/stores/gridor.js'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'

const gridor = useGridors()
const { data, editVisiable, curRow, options, states, curState } = storeToRefs(gridor)


const edit = (row) => {
  openEdit()
  gridor.edit(row)
}

const openEdit = () => {
  gridor.openEdit()
}
const closeEdit = () => {
  gridor.closeEdit()
}

onMounted(() => {
  gridor.loadData()
  gridor.loadPCR()
})

const handleChange = (value) => {
  console.log(value)
}

const editConfirm = () => {
  gridor.editConfirm()
}
const switchState = (value) => {
  switch (value) {
      case 0:
        return '正常'

      case 1:
        return '休假'

      case 2:
        return '其他'
  }
}
</script>

<template>
    <div class="window-container">
      <el-table :data="data" stripe style="width: 100%">
        <el-table-column prop="id" label="#" width="60" />
        <el-table-column prop="mname" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="60" />
        <el-table-column prop="tel" label="电话" />
        <el-table-column prop="address" label="负责网格" />
        <el-table-column prop="state" label="状态" width="80px">
          <template #default="scope">
            <el-tag>{{ states[scope.row.state].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="editVisiable" width="500" :before-close="closeEdit">
        <el-form>
          <el-form-item label="调整状态">
            <div style="margin-right: 20px">
              <el-radio-group v-model="curState" >
                <el-radio-button label="正常" value="0" />
                <el-radio-button label="休假" value="1"/>
                <el-radio-button label="其他" value="2" />
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="分配网格">
            <el-cascader
              v-model="curRow.gids"
              placeholder="search"
              :options="options"
              :props="
              {
                value: 'id',
                label: 'gname',
                children: 'children'
              }
            "
              filterable
            />
          </el-form-item>
        </el-form>
        <span>
          <el-button @click="editConfirm">confirm</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<style scoped lang="scss">

</style>